<template>
  <div class="app-container">
    <div v-if="showSearch" class="search-container">
      <CommonSearch
        :formConfig="searchColumns"
        :inline="true"
        labelWidth="80px"
        formItemWidth="auto"
        :model="searchParam"
        :labelPosition="'left'"
      >
        <template #after>
          <el-button type="primary" @click="search">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="handleReset">
            <i-ep-refresh />
            重置
          </el-button>
        </template>
      </CommonSearch>
    </div>

    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button
          @click="
            useDownload(
              '/andon/andcall/callExport',
              '安东呼叫查询',
              searchParam
            )
          "
        >
          <template #icon><i-ep-download /></template>导出</el-button
        >
      </template>
      <!-- 表格主体 -->
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        v-bind="$attrs"
        :data="tableData"
        highlight-current-row
        border
        @selection-change="handleSelectionChange"
        @sort-change="onTableSortChanged"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->

        <!-- 表格内容操作 -->
        <template v-for="item in tableColumns" :key="item">
          <TableColumn v-if="item.prop && item.isShow" :column="item">
            <template v-for="slot in Object.keys($slots)" #[slot]="scope">
              <slot :name="slot" v-bind="scope"></slot>
            </template>
          </TableColumn>
        </template>
      </el-table>

      <el-pagination
        :background="true"
        :current-page="pageable.pageNum"
        :page-size="pageable.pageSize"
        :page-sizes="[10, 25, 50, 100]"
        :total="pageable.total"
        layout="total, sizes, prev, pager, next, jumper"
        class="mt-[20px]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 列设置 抽屉组件 -->
    <ColSetting
      v-model:col-setting="tableColumns"
      v-model:search-setting="searchColumns"
      @search-handle="(e:boolean) => (showSearch = e)"
    />
  </div>
</template>

<script setup lang="ts">
import { useTable, useDictionary, useDownload } from "@/utils/useTable";
import {
  getworkCenter,
  getMesprocessList,
  getAndstoptypeList,
} from "@/api/andon/andon";

defineOptions({
  name: "ANDONANDCALLQUERY",
  inheritAttrs: false,
});

// 请求参数
const requestApi = "/andon/andcall/selectByPage";

// 是否需要分页
const pagination = true;

const initParam = reactive({});

// 初始化搜索参数数据
const searchParamInit = {
  workCenterId: "",
  processId: "",
  stopId: "",
  callMethod: "",
  callTimeSearch: [],
  callTimeStart: "",
  callTimeEnd: "",
};

const deleteParam = {
  api: "/system/sysRole/delete",
  data: {},
};

// 数据请求错误后处理
function requestError() {}

// 数据请求错误后处理
// function dataCallBack() {}   //需要处理
const dataCallBack = ref(undefined); //无需二次数据处理&不传赞数也行

// 表格操作 Hooks
const {
  tableData,
  pageable,
  searchParam,
  ids,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleTableDelete,
  loading,
}: any = useTable(
  requestApi,
  initParam,
  searchParamInit,
  pagination,
  dataCallBack.value,
  requestError,
  deleteParam
);

const tableColumns = reactive([
  { prop: "callTypeName", label: "呼叫类型", minWidth: 150, isShow: true },
  { prop: "stopName", label: "停机类型", minWidth: 150, isShow: true },
  { prop: "callCode", label: "呼叫编号", minWidth: 200, isShow: true },
  { prop: "processCode", label: "工序编码", minWidth: 150, isShow: true },
  { prop: "processName", label: "工序名称", minWidth: 150, isShow: true },
  { prop: "workCenterName", label: "生产线名称", minWidth: 150, isShow: true },
  { prop: "workCenterCode", label: "生产线编码", minWidth: 150, isShow: true },
  { prop: "callState", label: "呼叫状态", minWidth: 120, isShow: true },
  { prop: "callMemberName", label: "呼叫用户", minWidth: 120, isShow: true },
  { prop: "callTime", label: "呼叫时间", minWidth: 180, isShow: true },
  // { prop: "id", label: "呼叫等级", minWidth: 120, isShow: true },
  { prop: "issueTime", label: "解决时间", minWidth: 180, isShow: true },
  { prop: "answerTime", label: "应答时间", minWidth: 180, isShow: true },
  {
    prop: "answerTotal",
    label: "应答用时/分",
    minWidth: 120,
    isShow: true,
    align: "right",
  },
  { prop: "arriveTime", label: "到达时间", minWidth: 180, isShow: true },
  {
    prop: "arriveTotal",
    label: "到达用时/分",
    minWidth: 120,
    isShow: true,
    align: "right",
  },
  { prop: "repairFinishTime", label: "修复时间", minWidth: 180, isShow: true },
  {
    prop: "totalTime",
    label: "停机耗时/分",
    minWidth: 120,
    isShow: true,
    align: "right",
  },
  {
    prop: "inspectionTypeName",
    label: "故障类型",
    minWidth: 120,
    isShow: true,
  },
  {
    prop: "lastUpdatedUserName",
    label: "更新用户",
    minWidth: 120,
    isShow: true,
  },
  { prop: "lastUpdateTime", label: "更新时间", minWidth: 180, isShow: true },
]);

// 监听表格排序方法
const onTableSortChanged = (column: any) => {};

// 是否显示搜索框
const showSearch = ref(true);

// 获取工作中心列表
const getWorkCenterList = async () => {
  const { data } = await getworkCenter();
  searchColumns.find((item) => item.fieldName === "workCenterId").optionList =
    data.map((item) => ({
      label: item.workshopCode + "-" + item.workshopName,
      value: item.id,
    }));
};

// 获取工序列表
const getProcessList = async (e) => {
  console.log(searchParam.value.workCenterId !== "" ? false : true);
  const item = searchColumns.find((item) => item.fieldName === "processId");
  if (searchParam.value.workCenterId) {
    item.optionList = [];
    searchParam.value.processId = "";
    const { data } = await getMesprocessList({
      workCenterId: searchParam.value.workCenterId,
    });
    item.optionList = data.map((item) => ({
      label: item.processName,
      value: item.id,
    }));
    item.disabled = false;
  } else {
    item.optionList = [];
    searchParam.value.processId = "";
    item.disabled = true;
  }
};

// 获取停机类型列表
const getStopList = async () => {
  const { data } = await getAndstoptypeList();
  searchColumns.find((item) => item.fieldName === "stopId").optionList =
    data.map((item) => ({
      label: item.stopTypeName,
      value: item.id,
    }));
};

// 搜索参数 设置为响应式
const searchColumns: any = reactive([
  {
    type: "select",
    label: "工作中心",
    isShow: true,
    fieldName: "workCenterId",
    placeholder: "请选择工作中心",
    initValue: null,
    defaultFirstOption: true,
    optionList: [],
    change: (e) => getProcessList(e),
  },
  {
    type: "select",
    label: "工序",
    isShow: true,
    disabled: true,
    fieldName: "processId",
    placeholder: "请选择工序",
    initValue: null,
    defaultFirstOption: true,
    optionList: [],
  },
  {
    type: "select",
    label: "停机类型",
    isShow: true,
    fieldName: "stopId",
    placeholder: "请选择停机类型",
    initValue: null,
    defaultFirstOption: true,
    optionList: [],
  },
  {
    type: "select",
    label: "呼叫状态",
    isShow: true,
    fieldName: "callMethod",
    placeholder: "请选择呼叫状态",
    initValue: null,
    defaultFirstOption: true,
    optionList: useDictionary("CallState"),
  },
  {
    type: "date",
    dataType: "daterange",
    label: "呼叫时间",
    isShow: true,
    fieldName: "callTimeSearch",
    startPlaceholder: "请选择起始呼叫时间",
    endPlaceholder: "请选择截止呼叫时间",
    initValue: null,
    valueFormat: "YYYY-MM-DD",
    defaultFirstOption: true,
    change: (val) => {
      if (val) {
        searchParam.value.callTimeStart = val[0];
        searchParam.value.callTimeEnd = val[1];
      } else {
        searchParam.value.callTimeStart = "";
        searchParam.value.callTimeEnd = "";
      }
    },
  },
]);

// 重置数据处理
function handleReset() {
  reset();
  getWorkCenterList();
  searchColumns.find((item) => item.fieldName === "processId").optionList = [];
}
onMounted(async () => {
  await Promise.all([getWorkCenterList(), getStopList(), getTableList()]);
});
</script>

<style scoped lang="scss"></style>
